<!--添加新闻组件-->
<!--添加新闻组件-->
<template>
  <div class="Home">
    <div class="topmain">
      <div class="topmainleft">
        <div class="topmainleftbody1">
          <div class="topmainleftbody1block">新闻标题*：</div>
          <div class="topmainleftbody1block">发布时间：</div>
          <div class="topmainleftbody1block">新闻简介：</div>
          <div class="topmainleftbody1block">关键字：</div>
          <div class="topmainleftbody1block">新闻内容:</div>
          <div class="topmainleftbody1block">封面图片*：</div>
        </div>
        <div class="topmainleftbody2">
          <div class="topmainleftbody1input">
            <el-input v-model="title" placeholder=" "></el-input>
          </div>
          <div class="topmainleftbody1input">
            <el-input v-model="releaseTime" placeholder=" "></el-input>
          </div>
          <div class="topmainleftbody1input">
            <el-input v-model="summary" placeholder=" "></el-input>
          </div>
          <div class="topmainleftbody1input">
            <el-input v-model="keyword" placeholder=" "></el-input>
          </div>
          <div class="topmainleftbody1input">
            <el-input v-model="content" placeholder=" "></el-input>
          </div>
          <div class="topmainleftbody1input">
            <!-- <input type="file"  name="myfiles" /> -->
            <!-- <form
              method="post"
              action="http://sword.ink:2335/upload/picture"
              enctype="multipart/form-data"
            >
              选择文件： -->
              <!-- <br /> -->
              <!--必须有name属性，且值必须为myfiles-->
              <input type="file" name="myfiles" @change="submitPicture" />
              <!-- <input type="submit" value="上传" /> -->
            <!-- </form> -->
          </div>
        </div>
      </div>
      <!-- <div class="topmainright">
        <div class="topmainrightbody">
          <div class="topmainrightblock"></div>
          <div class="topmainrightblock"></div>
          <div class="topmainrightblock">*字数在100字以内</div>
          <div class="topmainrightblock">
        
          </div>
          <div class="topmainrightblock"></div>
          <div class="topmainrightblock" :style="hinddle"></div>
        </div>
      </div>-->
    </div>
    <div class="bottommain">
      <div id="editor">
        <p>
          欢迎使用
          <b>wangEditor</b> 富文本编辑器
        </p>
      </div>
    </div>
    <div class="foot">
      <el-button round @click="submit">发布</el-button>
    </div>
  </div>
</template>

<script>
import E from 'wangeditor';
export default {
  name: 'creat_news',
  data() {
    return {
      hinddle: 'visibility: hidden',
      title: '',
      releaseTime: '',
      summary: '',
      imgs: '',
      keyword: '',
      editor: '',
      content: '',
      submitInfo: {
        title: '',
        releaseTime: '',
        summary: '',
        picture: '',
        keyword: '',
        content: '',
      },
    };
  },
  mounted() {
    var that = this;
    this.editor = new E('#editor');
    this.editor.customConfig.onchange = function (text) {
      // console.log(text);
      that.content = text;
      that.submitInfo.content = text;
    };

    this.editor.customConfig.uploadImgServer =
      'http://dl.sword.ink:2335/upload/picture';
    //必要设置，值必须为“myfiles”
    this.editor.customConfig.uploadFileName = 'myfiles';
    // 图片最大体积为20MB
    this.editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024;
    //超时时间要设置长一点，否则大图片上传可能失败，默认为10秒，这里设置为30秒
    this.editor.customConfig.uploadImgTimeout = 30000;
    this.editor.create();
    this.editor.txt.html('<p>欢迎使用wangEditor编辑器</p>');
  },

  methods: {
    submitPicture(e) {
      // console.log(e);
      let self = this;
      let file = e.target.files[0];
      /* eslint-disable no-undef */
      let param = new FormData(); // 创建form对象
      param.append('myfiles', file); // 通过append向form对象添加数据
      // console.log(param.get('myfiles')); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' },
      };
      // 添加请求头
      this.$axios
        .post('http://sword.ink:2335/upload/picture', param, config)
        .then((res) => {
          if (res.data.code === 0) {
            // self.imgs = res.data.data[0];
            submitInfo.picture=res.data.data[0];
          }
          console.log(res.data.data);
        });
    },
    submit() {
      // this.$http.get('http://sword.ink:2335/news/18').then(function (res) {
      //   // console.log(res);
      //   // this.message = res.data.data[0].content;
      // });
      console.log(this.content);
      console.log(this.title);
      console.log(this.releaseTime);
      console.log(this.summary);
      console.log(this.keyword);
      this.submitInfo.title = this.inputName;
      this.submitInfo.releaseTime = this.inputTime;
      this.submitInfo.summary = this.summary;
      this.submitInfo.picture = this.imgs;
      this.submitInfo.keyword = this.keyword;
      this.submitInfo.content = this.content;
      var that=this
      // this.axios.post('http://dl.sword.ink:2334/news').then((response) => {
      //   console.log(response);
let config = {
        headers: { 'Content-Type': 'application/json' },
      };
      this.$axios.post("http://sword.ink:2334/news" ,JSON.stringify(this.submitInfo),config).then((res) => { 
          console.log(res);
        });
      //       that.submitInfo.title +
      //       '&releaseTime=' +
      //       that.submitInfo.releaseTime +
      //       '&=summary' +
      //       that.submitInfo.summary +
      //       '&=picture' +
      //       that.submitInfo.picture+
      //       "&=keyword"+
      //       that.submitInfo.keyword+
      //       "&=content"+
      //       that.submitInfo.content
      //   ) .then((res) => { 
      //     console.log(res);
      //   });
      
    },
  },
};
</script>


<style scoped>
.Home {
  display: grid;
  height: 120vh;
  width: 80vw;
  box-sizing: border-box;
  grid-template-rows: 50% 50%;
}
.topmain {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  background: #ffffff;
  /* border: 1px solid #777777; */
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.topmainleft {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border: 1px solid #777777;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin-top: 3%;
}

/* .topmainright {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid #777777;
  box-sizing: border-box;
  width: 30%;
  height: 100%;
  margin-top: 3%;
} */
.topmainrightblock {
  display: flex;
  align-items: center;
  /* border: 1px solid #777777; */
  box-sizing: border-box;
  width: 100%;
  height: 12%;
  margin-bottom: 5px;
  font-size: 15px;
  font-family: Microsoft YaHei, Microsoft YaHei-Normal;
  font-weight: Normal;
  text-align: left;
  color: #777777;
}

.topmainleftbody1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 1px solid #777777; */
  box-sizing: border-box;
  width: 20%;
  height: 100%;
}
.topmainleftbody2 {
  display: flex;
  flex-direction: column;
  /* border: 1px solid #777777; */
  box-sizing: border-box;
  width: 80%;
  height: 100%;
}
.topmainrightbody {
  display: flex;
  flex-direction: column;
  /* border: 1px solid #777777; */
  box-sizing: border-box;
  height: 100%;
}
.topmainleftbody1block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* border: 1px solid #777777; */
  box-sizing: border-box;
  width: 45%;
  height: 12%;
  font-size: 15px;
  font-family: Microsoft YaHei, Microsoft YaHei-Normal;
  font-weight: Normal;
  text-align: right;
  color: #777777;
  margin-bottom: 4px;
  margin-left: 40%;
}
.topmainleftbody1input {
  /* border: 1px solid #777777; */
  box-sizing: border-box;
  width: 98%;
  height: 12%;
  margin-bottom: 5px;
}

.bottommain {
  /* border: 1px solid #777777; */
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: 100%;
}
.foot {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 10vh;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
}
.el-input__inner {
  height: 30px;
  background: #ffffff;
  border: 1px solid #777777;
  box-sizing: border-box;
  border-radius: 0px;
}
